

require(['./config'], () => {
    require(['template', 'header', 'nav', 'footer'], (template,) => {
      class Page{
        constructor () {
          this.renderLists().then(resolve => {
            this.fenye()
            this.detaildown()
            this.topbutton()
          })
          
        }
        // detail
        detaildown(){
          $(() => {
              $('li:has(.detail)').hover(function () {
                // 如果100ms内再次进入，把定时器清除，就不隐藏了
                clearTimeout(this.timer)
                $(this).children('.detail').stop().slideDown(500)
              }, function () {
                // 离开的时候可能会再短时间内再次进入，所以用一个延时器
                this.timer = setTimeout(() => {
                  $(this).children('.detail').stop().slideUp(500)
                }, 100)
              })
            })
      }
      // 回到顶部
      detaildown(){
        $(window).scroll(function(){
          if ($(window).scrollTop()>100){ 
            $("#topBtn").fadeIn(700); 
        }
        else                           
        {
            $("#topBtn").fadeOut(700); 
        }
          $('#topBtn').on('click', function() {
            $('body,html').animate({ 
              scrollTop:0 
          },700);
          return false; 
        })
        })
      }

      // renderLists
        renderLists () {
          return new Promise(resolve => {
            $.get('http://rap2api.taobao.org/app/mock/236370/disc', resp => {
              if (resp.code === 200) {
                const { list } = resp.body
                $('#lists').html(template('pageTemplate', { list }))
                resolve()
              }
             
            })
          })
          
        }
        // 分页
       fenye (){
        tabPage({
          pageMain: '#lists',
          pageNav: '#pageNav',
          pagePrev: '#prev',
          pageNext: '#next',
          curNum: 12,
          /*每页显示的条数*/
          activeClass: 'active',
          /*高亮显示的class*/
          ini: 0 /*初始化显示的页面*/
      });
      function tabPage(tabPage) {
          var pageMain = $(tabPage.pageMain);
          /*获取内容列表*/
          var pageNav = $(tabPage.pageNav);
          /*获取分页*/
          var pagePrev = $(tabPage.pagePrev);
          /*上一页*/
          var pageNext = $(tabPage.pageNext);
          /*下一页*/

          var curNum = tabPage.curNum;
          /*每页显示数*/
          var len = Math.ceil(pageMain.find("li").length / curNum);
          /*计算总页数*/
          // console.log(len);
          var pageList = '';
          /*生成页码*/
          var iNum = 0;
          /*当前的索引值*/

          for (var i = 0; i < len; i++) {
              pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
          }
          pageNav.html(pageList);
          /*头一页加高亮显示*/
          pageNav.find("a:first").addClass(tabPage.activeClass);

          /*******标签页的点击事件*******/
          pageNav.find("a").each(function () {
              $(this).click(function () {
                  pageNav.find("a").removeClass(tabPage.activeClass);
                  $(this).addClass(tabPage.activeClass);
                  iNum = $(this).index();
                  $(pageMain).find("li").hide();
                  for (var i = ($(this).html() - 1) * curNum; i < ($(this).html()) * curNum; i++) {
                      $(pageMain).find("li").eq(i).show()
                  }

              });
          })


          $(pageMain).find("li").hide();
          /************首页的显示*********/
          for (var i = 0; i < curNum; i++) {
              $(pageMain).find("li").eq(i).show()
          }
          

          /*下一页*/
          pageNext.click(function () {
              $(pageMain).find("li").hide();
              if (iNum == len - 1) {
                  alert('已经是最后一页');
                  for (var i = (len - 1) * curNum; i < len * curNum; i++) {
                      $(pageMain).find("li").eq(i).show()
                  }
                  return false;
              } else {
                  pageNav.find("a").removeClass(tabPage.activeClass);
                  iNum++;
                  pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
                  //                    ini(iNum);
              }
              for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
                  $(pageMain).find("li").eq(i).show()
              }
          });
          /*上一页*/
          pagePrev.click(function () {
              $(pageMain).find("li").hide();
              if (iNum == 0) {
                  alert('当前是第一页');
                  for (var i = 0; i < curNum; i++) {
                      $(pageMain).find("li").eq(i).show()
                  }
                  return false;
              } else {
                  pageNav.find("a").removeClass(tabPage.activeClass);
                  iNum--;
                  pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
              }
              for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
                  $(pageMain).find("li").eq(i).show()
              }
          })
      }
       }
      } 
      new Page()
    })
  })